import React, { useEffect } from 'react'
import { getCurrentInstance, useShareAppMessage } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { useSelector } from 'react-redux'
import qs from 'qs'
import { AtButton } from 'taro-ui'
import { SpPage } from '@/components'
import api from '@/api'
import { log } from '@/utils'
import { useImmer } from 'use-immer'
import { useQwLogin, useNavigation } from '@/hooks'
import { BaHomeWgts } from '@/subpages/guide/components'
// import { WgtHomeHeader } from '@/pages/home/wgts'

import './custom-page.scss'

const initState = {
  wgts: [],
  shareInfo: {},
  showBackToTop: false,
  shopList: null
}

function GuideCustomPage() {
  const [state, setState] = useImmer(initState)
  const $instance = getCurrentInstance()
  const { setNavigationBarTitle } = useNavigation()
  const { isLogin, login } = useQwLogin({
    autoLogin: true
  })

  const { userInfo } = useSelector((state) => state.guide)

  const { wgts, shareInfo, shopList } = state

  useEffect(() => {
    if (userInfo) {
      fetchWgts()
    }
  }, [userInfo])

  const fetchWgts = async () => {
    const { id } = $instance.router.params
    const { config, share } = await api.guide.getHomeTmps({
      template_name: 'yykweishop',
      version: 'v1.0.1',
      page_name: `custom_${id}`
    })
    setNavigationBarTitle(share.page_name)
    setState((draft) => {
      draft.wgts = config
      draft.shareInfo = share
    })
  }

  useShareAppMessage(async () => {
    const { id, subtask_id } = $instance.router.params
    const { salesperson_id, distributor_id, work_userid, shop_code } = userInfo
    const { userId } = Taro.getStorageSync('userinfo')

    const query = {
      id,
      dtid: distributor_id,
      smid: salesperson_id,
      gu: `${work_userid}_${shop_code}`,
      subtask_id,
      shareUserId: userId,
      company_id: process.env.APP_COMPANY_ID
    }
    const path = `/pages/custom/custom-page?${qs.stringify(query)}`

    return {
      title: shareInfo.page_share_title,
      imageUrl: shareInfo.page_share_imageUrl,
      path: path
    }
  })

  return (
    <SpPage
      className='page-guide-custompage'
      scrollToTopBtn
      renderFooter={
        <View className='btn-wrap'>
          <AtButton circle className='btn-share' type='primary' openType='share'>
            分享给顾客
          </AtButton>
        </View>
      }
    >
      <View className='home-body'>
        <BaHomeWgts wgts={wgts} />
      </View>
    </SpPage>
  )
}

export default GuideCustomPage
